
// 1.该对象具有切换功能
// 2.该对象具有添加功能
// 3.该对象具有删除功能
// 4.该对象具有修改功能

//定义一个变量存放this
var that;
// 定义计数器
var count = 0;
// 定义Tab类
class Tab {
    // 构造函数
    constructor(id) {
        that = this;
        // 获取小li
        this.main = document.querySelector(id);
        this.add = this.main.querySelector('.tabadd');  //获取添加那按钮
        this.ul = this.main.querySelector('.firstnav ul:first-child')  //获取li的父元素ul 
        this.fsection = this.main.querySelector('.tabscontent')
        this.init();
    }

    // 初始化功能
    init() {
        this.updateload();
        this.add.onclick = this.addTab; //只有添加才会调用
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].index = i;
            this.lis[i].onclick = this.toggleTab.bind(this.lis[i], this);  //点击完成后再调用，所以后面不加()
            this.remove[i].onclick = this.removeTab;
            this.spans[i].ondblclick = this.editTab;
            this.sections[i].ondblclick = this.editTab;

        }
    }

    //获取所有的小li和section
    updateload() {
        this.lis = this.main.querySelectorAll('li');
        this.sections = this.main.querySelectorAll('section');
        this.remove = this.main.querySelectorAll('.del'); //添加删除按钮
        this.spans = this.main.querySelectorAll('.firstnav li span:first-child');
    }


    //1.切换功能
    toggleTab(that) {
        // console.log(this.index);  //当前的li的索引号
        that.clearClass();  //这里是实例对象调用，而不this指向的小li调用

        this.className = 'bordernone';  //添加这个类，去掉下边框
        that.sections[this.index].className = 'visible';
        // //这里面的this指向的是调用者，上面的点击的小li，但是小li里面没有sections这个属性
        //这里的that指的是 constructor里面的指向
    }

    clearClass() {
        for (var i = 0; i < this.lis.length; i++) {
            this.lis[i].className = '';
            this.sections[i].className = '';
        }
    }


    //2.添加功能
    //点击+可以实现添加新的选项卡内容
    //第一步，创建新的选项卡小li,和新的内容section
    //第二步：把创建的两个元素追加到对应的父元素中。
    addTab() {
        that.clearClass(); //先清除后调用
        //1)创建li元素
        //insertAdjacentHTML()可以直接把字符串格式元素添加到父元素中
        var li = '<li class="bordernone"><span>新选项卡</span><span class="del"></span></li>';

        //把这两个元素追加到对应的父元素里面
        that.ul.insertAdjacentHTML('beforeend', li);  //这里面的that同理

        //2.添加section
        var section = ' <section class="visible">新选项卡</section>';
        that.fsection.insertAdjacentHTML('beforeend', section);

        that.init();//,当我们添加新选项卡时，重新更新小lisection，重新格式化


    }
    //3.删除功能
    removeTab(e) {
        e.stopPropagation();  //我们只想要关闭，逼向冒泡上去的小li切换事件，组织冒泡
        var index = this.parentNode.index; //this指的是关闭按钮的爸爸的index
        console.log(index);

        //根据索引号删除对应的小li何section
        that.lis[index].remove();   //点击删除按钮，删除当前的小li
        that.sections[index].remove();
        that.init();

        //当我删除的不是选中状态的li的时候，原来选中状态的li保持不变
        if (document.querySelector('.bordernone')) return;

        index--;//当我们删除了选中状态的这个li时，让它的前一个li处于选定状态

        that.lis[index] && that.lis[index].click();//click()手动调用我们的点击事件 不需要鼠标触发
        //当index=-1时，没有这个小li，根据&&一假全假，就不执行后面click()
        //当index=0时，后面的click()还会执行

    }

    //修改编辑功能  
    //1.双击选项卡li或者section里面的文字，可以实现修改功能
    //2.双击事件：ondblclick
    //3.如果双击文字，会默认选定文字，此时需要双击禁止选中文字
    //4.核心思路，双击文字的时候，里面生成一个文本框，当失去焦点或者按下回车把文本框输入值给原先元素即可
    editTab() {
        var str = this.innerHTML   //先获取里面的点击里面的内容 
        //双击禁止选中文字
        window.getSelection ? window.getSelection().removeAllRanges() : doucument.selection.empty();
        this.innerHTML = '<input type="text" />'
        var input = this.children[0];   //把span里面第一个孩子input文本框,
        input.value = str;

        input.select();  //文本框里面的文字处于选中状态

        //当我们离开文本框里面的值给span
        input.onblur = function () {  //onblur表示鼠标离开onblur表单
            this.parentNode.innerHTML = this.value;  //this.parentNode.innerHTML表示input的父亲的值

        };
        //按下回车也可以把文本框里面的值给span
        input.onkeyup = function (e) {
            if (e.keyCode === 13) {   //按住回车键
                this.blur()   //手动调用了鼠标失去焦点事件 不需要鼠标离开操作
            }
        }

    }



}


// 创建实例
new Tab('#tab');
